iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
自我挑戰組

新手的JavaScript扎根之路系列 第 10

Day10 另一種流程判斷switch

  • 分享至 

  • xImage
  •  

嗨嗨!我是Winnie溫尼~/images/emoticon/emoticon08.gif

前言

在前一個章節,我們if、else、else if的流程判斷,還有另一種判斷方法是switch,那麼今天就讓我們一起來認識這個新朋友吧~!

流程判斷switch...

當switch小括號中參數的值與case條件相符時,則執行該區塊動作,並且使用break中斷程式碼避免繼續往下執行,若不符則繼續往下尋找對應的值,若值與條件皆不相符則可使用default。

switch(參數){
case 條件一 :
  參數符合條件一,要執行的動作;
  break;
case 條件二 :
  參數符合條件二,要執行的動作;
  break;
    ⋮
default:
  若沒有參數符合case,則執行此動作;
  break;
}

以昨天的例子來說:如果明天是晴天,就騎腳踏車出門,如果陰天,就搭公車;如果下毛毛雨,就搭捷運;如果下暴雨,就搭計程車;如果遇到颱風、地震...等等其他狀況就不出門。

let tommorowWeather = "陰天"; //假設明天是天氣
switch (tommorowWeather) {
  case "晴天":
    console.log("明天騎腳踏車出門");
    break;
  case "陰天":
    console.log("明天搭公車出門");
    break;
  case "毛毛雨":
    console.log("明天搭捷運出門");
    break;
  case "暴雨":
    console.log("明天搭計程車出門");
    break;
  default:
    console.log("明天不出門");
}
//明天搭公車出門

if vs switch

  • 嚴謹度:switch 在判斷上採取嚴謹模式(值與型別皆須相同才成立),而在 if else 的判斷上則可自由使用==或===。
  • 效能:if 瀏覽器在渲染或編譯的時候,會全部跑一次,若為條件繁多的情況下,會比switch效能差。因為switch只會檢視case有無符合,才會去跑程式碼,並非所有的內容都檢視過一次。因此,當是判斷一個範圍的時候,介於某區間,大於小於多少,建議使用if else;當是判斷一個特定明確的case時,則建議使用switch。

參考資料

控制判斷(運算子、if、switch)
JavaScript switch 語法
if 與 switch 的使用時機?

新手上路,如文章有錯誤或需修正之處,懇請大家多多指教!
那麼,我們明天見囉~/images/emoticon/emoticon29.gif


上一篇
Day09 有趣的流程判斷if 、else、else if
下一篇
Day11 陣列 Array
系列文
新手的JavaScript扎根之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言